import React, { Component } from "react";
import { nanoid } from "nanoid";
import PropTypes from "prop-types"
import "./index.css";

export default class Header extends Component {

  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  }

  handleKeyDown = (event) => {
    const { keyCode, target } = event;
    if (keyCode === 13) {
      if(target.value.trim() === '') return;
      const todoObj = { id: nanoid(), name: target.value, done: false };
      this.props.addTodo(todoObj);
      target.value = "";
    }
  };

  render() {
    return (
      <div className="todo-header">
        <input
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
          onKeyUp={this.handleKeyDown}
        />
      </div>
    );
  }
}
